<title>新增角色 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<!--表格插件css-->
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">

<div class="col-lg-12">
    <div class="card-body">
        <form action="" id="example-from">
            <input type="hidden" name="id" value="{$info.id}" />
            <div class="mb-3 row align-items-center">
                <div class="col-md-1"><label class="col-form-label" for="name">角色名</label></div>
                <div class="form-group col">
                    <input type="text" maxlength="8" class="form-control" autocomplete="off"  id="name" name="name" value="{$info.name}" placeholder="请输入角色名，最大字数为8个" />
                </div>
            </div>
            <div class="mb-3 row align-items-center">
                <label class="col-md-1 col-form-label" for="status">是否启用</label>
                <div class="col">
                    <div class="form-check form-switch">
                        <input type="checkbox"  class="form-check-input" value="1" id="status" name="status" {$info.status == 1 ? 'checked' : ''}>
                        <label class="form-check-label" for="status"></label>
                    </div>
                </div>
            </div>
            <div class="mb-3 row align-items-center">
                <div class="col-md-1"><label class="col-form-label"></label></div>
                <div class="form-group col">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input checkbox-parent" type="checkbox" id="roleid-1"  dataid="id-1" >
                                        <label class="form-check-label" for="roleid-1">全选</label>
                                    </div>
                                </td>
                            </tr>
                            {volist name="menuList" id="v"}
                            {if condition="$v.child"}
                            <tr>
                                <td class="ps-lg-4">
                                    <div class="form-check">
                                        <input class="form-check-input checkbox-child" type="checkbox" name="mid[]" id="roleid-1-73" dataid="id-1-{$v.id}" value="{$v.id}" {if condition="in_array($v.id, $myMenuArray)"}checked{/if}>
                                        <label class="form-check-label" for="roleid-1-73">{$v.name}</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="ps-lg-5">
                                    {volist name="$v.child" id="value"}
                                    <div class="form-check">
                                        <input class="form-check-input checkbox-child" type="checkbox" name="mid[]" id="roleid-1-{$value.pid}-{$value.id}" dataid="id-1-{$value.pid}-{$value.id}" value="{$value.id}" {if condition="in_array($value.id, $myMenuArray)"}checked{/if}>
                                        <label class="form-check-label" for="roleid-1-{$value.pid}-{$value.id}">{$value.name}</label>
                                    </div>
                                    {/volist}
                                </td>
                            </tr>
                            {/if}
                            {/volist}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="mb-3 row">
                <div class="col offset-md-1">
                    <button type="submit" class="btn btn-primary save-btn">立即编辑</button>
                    <button type="reset" class="btn btn-warning">重 置</button>
                    <button type="button" class="btn btn-secondary close-btn">关闭</button>
                </div>
            </div>

        </form>

    </div>
</div>

<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/layer/src/layer.js"></script>
<!--加载动画插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<!--表单验证-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/messages_zh.min.js"></script>

<script type="text/javascript">
    $(function () {
        //动态选择框，上下级选中状态变化
        $('input.checkbox-parent').on('change', function () {
            var dataid = $(this).attr("dataid");
            $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
        });

        $('input.checkbox-child').on('change', function () {
            var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
            var parent = $('input[dataid=' + dataid + ']');
            if ($(this).is(':checked')) {
                parent.prop('checked', true);
                //循环到顶级
                while (dataid.lastIndexOf("-") != 2) {
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    parent.prop('checked', true);
                }
                //更新当前节点的子节点状态
                $('input[dataid^=' + $(this).attr("dataid") + '-]').prop('checked', true);
            } else {
                //父节点取消选中
                if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                    parent.prop('checked', false);
                }
                //更新当前节点的子节点状态
                $('input[dataid^=' + $(this).attr("dataid") + '-]').prop('checked', false);
            }
        });
    });
</script>
<script>
    $(function (){
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

        /**
         * 关闭当前窗口
         */
        $('.close-btn').click(function(){
            parent.layer.close(index);
        });

        let $exampleFrom = $('#example-from');
        $exampleFrom.submit(function(){
            event.preventDefault();
        });

        $exampleFrom.validate({
            ignore: ".ignore",    // 插件默认不验证隐藏元素,这里可以自定义一个不验证的class,即验证隐藏元素,不验证class为.ignore的元素
            focusInvalid: false,  // 禁用无效元素的聚焦
            rules: {
                'name': {
                    required: true,
                    maxlength: 8,
                },
            },
            errorPlacement: function errorPlacement(error, element) {
                var $parent = $(element).parents('.form-group');
                if ($parent.find('.invalid-feedback').length) {
                    return;
                }
                $(element).addClass('is-invalid');
                $parent.append(error.addClass('invalid-feedback'));
            },
            highlight: function(element) {
                var $el = $(element);
                if ($el.hasClass('js-tags-input')) {
                    $el.next('.tagsinput').addClass('is-invalid');  // tags插件所隐藏的输入框没法实时验证，比较尴尬
                }
            },
            unhighlight: function(element) {
                $(element).next('.tagsinput').removeClass('is-invalid');
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                let l = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                post("{:url('/admin/role/edit')}", $(form).serialize()).success(res => {
                    if(res.code === 200){
                        setTimeout(function () {
                            l.destroy();
                            $('.close-btn').click();
                            parent.refreshTable();
                        }, 500);
                    }else{
                        l.destroy();
                    }
                }).error();
            }
        });
    });
</script>